<template>
  <view class="no-search">
    <!-- 历史 -->
    <view v-show="searchHistory.length">
      <view class="title flex flex-middle flex-between">
        搜索记录
        <u-icon
          name="trash-fill"
          size="20"
          color="#ccc"
          @click="clearHistory"
        />
      </view>
      <view class="list flex flex-wrap">
        <view
          class="item"
          v-for="(item, index) in searchHistory"
          :key="index"
          @click="clickSearchItem(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <!-- 热门 -->
    <view>
      <view class="title"> 热门搜索 </view>
      <view class="list flex flex-wrap">
        <view
          class="item flex flex-middle"
          v-for="(item, index) in hotSearch"
          :key="index"
          @click="clickSearchItem(item.val)"
        >
          <image
            src="@/static/image/search/fire.png"
            mode="widthFix"
            v-if="item.isHot"
          />
          {{ item.val }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    clickSearchItem: {
      type: Function,
      default: () => {},
    },
    hotSearch: {
      type: Array,
      default: () => {
        return [
          {
            val: "做饭阿姨",
            isHot: true,
          },
          {
            val: "上门看诊",
            isHot: true,
          },
          {
            val: "健身私教",
            isHot: true,
          },
          {
            val: "保洁",
          },
          {
            val: "SPA",
          },
        ];
      },
    },
  },
  computed: {
    ...mapGetters(["searchHistory"]),
  },
  methods: {
    async clearHistory() {
      const res = await this.$dialog({
        showCancel: true,
        content: "确认清空搜索记录？",
      });
      if (res) this.$store.dispatch("clearSearchHistory");
    },
  },
};
</script>

<style scoped lang="scss">
.no-search {
  padding-top: 16px;
}

.list {
  padding-bottom: 20px;

  .item {
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    background: #f6f6f6;
    border-radius: 32px;
    font-size: 12px;
    color: #232323;
    border: 1px solid #ccc;
    margin-right: 12px;
    margin-top: 12px;

    image {
      width: 12px;
      margin-right: 2px;
    }
  }
}
</style>